<template>
  <div style="padding: 10px">
    <a-card
      style="width: 100%;"
      :tab-list="tabList"
      :active-tab-key="key"
      @tabChange="key => onTabChange(key, 'key')"
    >
      <p v-if="key === 'introduce'">
        <Introduce :description="course?.description" />
      </p>
      <p v-else-if="key === 'catalog'">
        <Catalog :catalogList="course?.catalogList" />
      </p>
      <p v-else-if="key === 'comment'">
        <Comment :course="course" v-if="!!course?.id" />
      </p>
      <p v-else-if="key === 'courseExam'">
        <CourseExam :examId="course?.examId" />
      </p>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import Introduce from "@/views/course/coursedetail/Introduce.vue";
import Catalog from "@/views/course/coursedetail/Catalog.vue";
import Comment from "@/views/course/coursedetail/Comment.vue";
import CourseExam from "@/views/course/coursedetail/CourseExam.vue";

const tabList = [
  {
    key: "introduce",
    tab: "课程介绍"
  },
  {
    key: "catalog",
    tab: "课程目录"
  },
  {
    key: "comment",
    tab: "用户评价"
  },
  {
    key: "courseExam",
    tab: "课程考试"
  }
];

const key = ref("introduce");

const props = defineProps({
  course: {
    type: Object,
    default: null
  }
});

const onTabChange = (value: string, type: string) => {
  key.value = value;
};
</script>

